<section id="o2oc-restaurant-panel">
    <div class="mask close-cart-menu" ng-click="hideCartMenu()"></div>

    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-8">
                    <h1>{{ merchant.name }}</h1>
                    <p>Address: {{ merchant.address }}</p>
                </div>
                <div class="col-sm-12 col-md-4">
                    <img class="shop-logo" ng-src="{{globalData.contextPath}}/api/resources/{{merchant.imgHead}}">
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="col-sm-12 col-md-6" ng-repeat="dishItem in dishes">
                    <div class="thumbnail">
                        <div class="dish-img">
                            <img ng-src="{{globalData.contextPath}}/api/resources/{{dishItem.img}}">
                            <button class="btn btn-warning add-to-cart" ng-click="addItemToCart($event, dishItem)">
                                <span class="glyphicon glyphicon-plus"></span>Add to Cart
                            </button>
                        </div>
                        <div class="dish-info">
                            <div class="caption">
                                <h3>{{ dishItem.name }}</h3>
                                <p>{{ dishItem.type }}</p>
                                <h4>{{ dishItem.price }}</h4>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Comments</h3>
                    </div>
                    <div class="panel-body">
                        
                        <span ng-if="!merchantComments || merchantComments.length == 0">Nothing here!</span>
                        
                        <div ng-repeat="comm in merchantComments">
                            <p>{{comm.content}}</p>
                            <p style="text-align:right;"><i>{{comm.createTime | date:'yyyy-MM-dd'}}</i></p>
                            <hr ng-if="!$last">
                        </div>
                        
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <div class="fixed-btns">
        <button id="open-cart-btn" class="btn btn-success btn-lg" ng-click="showCartMenu()">
            <i class="glyphicon glyphicon-shopping-cart"></i>
        </button>
    </div>

    <div class="cart-menu">
        <div>
            <a href="javascript:;" class="close-cart-menu" ng-click="hideCartMenu()"><span class="glyphicon glyphicon-menu-left"></span> Back</a>
        </div>
        
        <h1 style="position: absolute; top: 40px; left: 80px;">Nothing in cart!</h1>
        
        <ul id="cart-list" class="list-group">
            <li class="list-group-item" ng-repeat="item in cart">
                <div class="cart-item-img">
                    <img ng-src="{{globalData.contextPath}}/api/resources/{{item.img}}">
                </div>
                <div class="cart-item-info">
                    <div class="caption">
                        <h4>{{ item.dishName }}</h4>
                        <p>Single: <strong class="single-price">{{ item.unitPrice }}</strong></p>
                        <p>Total: <strong class="total-price">{{ item.num * item.unitPrice }}</strong></p>
                    </div>
                </div>
                <div class="cart-item-ops">
                    <button class="btn btn-danger delete-cart-item" ng-click="removeCartItem(item._id)">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                    <div class="input-group">
                        <a href="javascript:;" class="cart-minus input-group-addon" ng-click="decreaseCartItem($event, item._id)">
                            <span class="glyphicon glyphicon-minus"></span>
                        </a>
                        <input type="text" class="form-control" value="{{ item.num }}" disabled="disabled">
                        <a href="javascript:;" class="cart-plus input-group-addon" ng-click="increaseCartItem($event, item._id)">
                            <span class="glyphicon glyphicon-plus"></span>
                        </a>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
        </ul>
        
        <div>
            <div class="panel panel-default">
                <div class="panel-body">
                    Total Price: <strong>{{ getTotalPrice() }}</strong>
                </div>
            </div>
            <a ui-sref="o2o_c.pay" role="button" class="pay-the-bill-btn btn btn-success">Pay the Bill</a>
        </div>
    </div>

    <div id="login-required-modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">You are not logined yet</h4>
                </div>
                <div class="modal-body">
                    Please login first.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a ui-sref="login" role="button" class="btn btn-primary" ng-click="hideModal('login-required')">Login</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</section>